<template>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <h2 v-if="!comments.length">暂无评论，点击左侧添加评论！！！</h2>
    <ul class="list-group">
      <!-- 单个评论 -->
      <!-- 遍历展示Item -->
      <CommentItem
        v-for="(comment, index) in comments"
        :key="comment.id"
        :comment="comment"
        @delComment="delComment"
        :index="index"
      />
    </ul>
  </div>
</template>

<script>
import CommentItem from "./components/CommentItem.vue";

export default {
  name: "CommentList",
  components: {
    CommentItem,
  },
  data() {
    return {
      // 评论数据
      comments: [
        {
          id: 1,
          username: "静哥",
          content: "我喜欢大保健",
        },
        {
          id: 2,
          username: "陶哥",
          content: "我喜欢洗脚",
        },
      ],
    };
  },
  methods: {
    // 添加评论
    addComment(comment) {
      // 函数需不需要参数：看函数内部有没有不确定的量
      // 在React中，更新数据，不建议修改原数据的 -> this.setState({ comments: [...this.state.comments, comment] })
      // 在Vue中，可以直接修改数据
      this.comments.push({
        id: Date.now(), // 唯一的id
        ...comment, // 没有id，需要添加id
      });
    },
    // 删除评论
    // delComment(id) {
    //   this.comments = this.comments.filter((comment) => comment.id !== id);
    // },
    delComment(index) {
      this.comments.splice(index, 1);
    },
  },
  mounted() {
    this.$bus.$on("addComment", this.addComment);
  },
  beforeDestroy() {
    this.$bus.$off("addComment", this.addComment);
  },
};
</script>

<style>
.reply {
  margin-top: 0px;
}
</style>